<!-- 搜索结果列表 -->
<template>
	<view>
		<search></search>

		<!-- scroll-view class="label" scroll-x enable-flex>
			<view class="label-item"><text>单曲</text></view>
			<view class="label-item"><text>单曲</text></view>
			<view class="label-item"><text>单曲</text></view>
			</scroll-view> -->

		<view class="list-body">
			<view class="list-top">
				<image src="../../static/search/视频.png"></image>
				<text>播放全部</text>
			</view>
			<SongItem v-for="(item,index) in SearchContent" :key="item.id" :name="item.name"
				:artists="item.artists[0].name" :album="item.album.name" :index="index" :data="SearchContent">
			</SongItem>
		</view>
	</view>
</template>


<script>
	import {
		mapActions,
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		methods: {
			...mapActions('search_list', ['GetSearchContent']),
			...mapMutations('search', ['setSearchHistory']),
		},
		computed: {
			...mapState('search', ['search']),
			...mapState('search_list', ['SearchContent'])
		},
		onLoad() {
			this.GetSearchContent(this.search).then(value => {
				if (value['code'] === 200) {
					this.setSearchHistory(this.search)
				}
			})
		}
	}
</script>

<style lang="scss">
	// .label {
	// 	display: flex;
	// 	background-color: #2c2c2c;
	// 	height: 50rpx;

	// 	.label-item {
	// 		margin-right: 30rpx;

	// 		text {
	// 			color: #fff;
	// 			font-size: 28rpx;
	// 			opacity: 0.8;
	// 		}
	// 	}
	// }

	.list-body {
		.list-top {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			image {
				height: 40rpx;
				width: 40rpx;
				margin-right: 30rpx;
			}

			text {
				color: #fff;
			}
		}
	}
</style>
